<template>
  <div class="left-options">
    <div
      :class="{ yearItem: true, itemActive: options.currentIndex === index }"
      v-for="(item, index) in options.optionsData"
      :key="index"
      @click="changeOptions(index)"
    >
      {{ item }}
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
const options = reactive({
  currentIndex: 0,
  optionsData: [
    2021,
    2020,
    2019,
    2018,
    2017,
    2016,
    2015,
    2014,
    2013,
    2012,
    2011,
    2010,
    2009,
    "历年全部",
  ],
});

const emits = defineEmits(["changeOptions"]);

const changeOptions = (index) => {
  options.currentIndex = index;
  emits("changeOptions", index);
};
</script>

<style scoped lang="less">
.left-options {
  width: 160px;
  height: 1225px;
  margin: 0;
  border-radius: 10px 0 0 10px;
  background-color: #f9f9f9;
  box-shadow: 3px 0px 10px 0px rgb(60 60 60 / 10%);
  .yearItem {
    width: 145px;
    height: 60px;
    line-height: 60px;
    color: #757575;
    margin: 0 auto;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
  }
  .itemActive {
    width: 145px;
    height: 82px;
    line-height: 82px;
    background: url(https://www.ali213.net/images/phb_n12.png) no-repeat center
      center;
    color: #ff5000;
    margin: auto;
    font-size: 24px;
  }
}
</style>
